<template>
  <div class="works">

    <div class="wkTable" v-if="worksArr.length">
      <div class='top'>
        <div class='name'>作业名称</div>
        <div class='author'>创建者</div>
        <div class='status'>状态</div>
        <div class='posttime'>开始时间</div>
        <div class='deadline'>结束时间</div>
        <div class='count'>分数</div>
        <div class='operate'>操作</div>
      </div>
      <div class='row' v-for='item in worksArr' :key='item.id'>
        <div class='name' :title='item.name'>
          <el-tag v-if="item.status == 2" effect="plain" round type="info">已结束</el-tag>
          <el-tag v-if="item.status == 1" effect="plain" round type="primary">进行中</el-tag>
          {{ giveEllipsisStr(item.name, 18) }}
        </div>
        <div class='author'>{{ item.nick_name }}</div>
        <div class='status'>
          <div v-if="item.s_status == 1" style="color: #43CF7C; display: flex; align-items: center;"><el-icon
              style="margin-right: 5px;">
              <Postcard />
            </el-icon>已完成</div>
          <div v-if="item.s_status == 0" style="color: #4395FF; display: flex; align-items: center;"><el-icon
              style="margin-right: 5px;">
              <CircleCheck />
            </el-icon>已提交</div>

          <div v-if="item.s_status == -1" style="color: #FF5733; display: flex; align-items: center;"><el-icon
              style="margin-right: 5px;">
              <CircleClose />
            </el-icon>未提交</div>

          <div v-if="item.s_status == 2" style="color: #FF5733; display: flex; align-items: center;"><el-icon
              style="margin-right: 5px;">
              <CircleClose />
            </el-icon>已驳回 <el-tooltip class="box-item" effect="dark" :content="item.reject_remark"
              placement="top-start">
              <el-icon style="color: #999; font-size: 18px; margin-left: 5px;">
                <WarningFilled />
              </el-icon>
            </el-tooltip></div>
        </div>

        <div class='posttime' :title='parseTime(item.release_time)'>
          {{ parseTime(item.release_time, '{m}月{d}日{h}时') }}
        </div>
        <div class='deadline' :title='parseTime(item.end_time)'>{{ parseTime(item.end_time, '{m}月{d}日{h}时') }}</div>

        <div class='count'>
          <div v-if="item.fraction">
            <b>{{ item.fraction }}</b>分
          </div>
          <div style="color: #999;" v-else>
            未评分
          </div>

        </div>
        <div class='operate'>
          <ul>
            <li v-if="item.s_status == 0 || item.s_status == 1||item.status==2" class='review-btn'
              @click='goReview(item.id, item.submit_id, item.s_status, item.status)'>查看</li>

            <li v-if="(item.s_status == -1 || item.s_status == 2) && item.status == 1" class='review-btn'
              @click='goReview(item.id, item.submit_id, item.s_status, item.status)'>提交</li>
          </ul>
        </div>
      </div>


      <!-- <el-table :data="worksArr" id="tableData" style="width: 100%;overflow-x:auto; height: 70vh" class="studentTable">
        <el-table-column width="200px" prop="name" label="作业名称">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 2" effect="plain" round type="info">已结束</el-tag>
            <el-tag v-if="scope.row.status == 1" effect="plain" round type="primary">进行中</el-tag>
            {{ giveEllipsisStr(scope.row.name, 18) }}
          </template>
        </el-table-column>

        <el-table-column width="200px" prop="nick_name" label="创建者">
          <template #default="scope">
            {{ scope.row.nick_name }}
          </template>
        </el-table-column>

        <el-table-column width="120px" align="center" prop="status" label="状态">
          <template #default="scope">
            <div v-if="scope.row.s_status == 1" style="color: #43CF7C; display: flex; align-items: center;"><el-icon
                style="margin-right: 5px;">
                <Postcard />
              </el-icon>已完成</div>
            <div v-if="scope.row.s_status == 0" style="color: #4395FF; display: flex; align-items: center;"><el-icon
                style="margin-right: 5px;">
                <CircleCheck />
              </el-icon>已提交</div>

            <div v-if="scope.row.s_status == -1" style="color: #FF5733; display: flex; align-items: center;"><el-icon
                style="margin-right: 5px;">
                <CircleClose />
              </el-icon>未提交</div>

            <div v-if="scope.row.s_status == 2" style="color: #FF5733; display: flex; align-items: center;"><el-icon
                style="margin-right: 5px;">
                <CircleClose />
              </el-icon>已驳回 <el-tooltip class="box-item" effect="dark" :content="scope.row.reject_remark"
                placement="top-start">
                <el-icon style="color: #999; font-size: 18px; margin-left: 5px;">
                  <WarningFilled />
                </el-icon>
              </el-tooltip></div>
          </template>
        </el-table-column>




        <el-table-column width="200px" align="center" prop="release_time" label="开始时间">
          <template #default="scope">
            {{ parseTime(scope.row.release_time, '{m}月{d}日{h}时') }}

          </template>
        </el-table-column>

        <el-table-column width="200px" align="center" prop="end_time" label="结束时间">
          <template #default="scope">
            {{ parseTime(scope.row.end_time, '{m}月{d}日{h}时') }}
          </template>
        </el-table-column>


        <el-table-column width="120px" align="center" prop="count" label="分数">
          <template #default="scope">
            <div v-if="scope.row.fraction">
              <b>{{ scope.row.fraction }}</b>分
            </div>
            <div style="color: #999;" v-else>
              未评分
            </div>
          </template>
        </el-table-column>

        <el-table-column min-width="240px" align="center" prop="final_score" label="操作">
          <template #default="scope">

            <div class='operate'>
              <ul>
                <li v-if="scope.row.s_status == 0 || scope.row.s_status == 1 || scope.row.status == 2" class='review-btn'
                  @click='goReview(scope.row.id, scope.row.submit_id, scope.row.s_status, scope.row.status)'>查看</li>

                <li v-if="(scope.row.s_status == -1 ||scope.row.s_status == 2) && scope.row.status == 1" class='review-btn'
                  @click='goReview(scope.row.id, scope.row.submit_id, scope.row.s_status, scope.row.status)'>提交</li>
              </ul>
            </div>
          </template>
        </el-table-column>
      </el-table> -->
    </div>


    <div style="display: flex; justify-content: center; align-items: center; height: 80vh" v-else>
      <el-empty :image-size="200" description='暂无作业' />
    </div>

    
  </div>
</template>

<script setup>

import { ref } from "vue";
import { CircleCheck, Postcard, CircleClose } from "@element-plus/icons-vue";
import { giveEllipsisStr, giveTagState, parseTime } from '@/utils/common';
import { worklist, stuworklist } from '@/api/banke/zuoye'
import counterStore from "@/store/modules/counter";
const loading = ref(false)
const pageTotal = ref(0);
const router = useRouter()

import { ElLoading, ElMessage } from 'element-plus';

// 作业列表测试数据
const worksArr = ref([])
//点击查阅作业
const goReview = (id, submit_id, s_status, status) => {
  console.log(id);
  router.push({ path: '/designclass/wkdetail', query: { activeNum: 2, id, submit_id, s_status, status } });
};

//获取作业列表
const getWorkList = (keyname = '') => {
  stuworklist(counterStore().bkItem.id).then(res => {
    console.log(res);

    if (res) {
      res.forEach(e => {
        if (e.reject_remark) {
          e.reject_remark = e.reject_remark.replace(/<p>/g, '').replace('</p>', '');

        }

      })

      worksArr.value = res
      pageTotal.value = res.length;
    } else {
      ElMessage.error('操作有误请重新刷新');
    }
  }).finally(() => {
    loading.value = false
  })
};

getWorkList()
</script>

<style lang="scss" scoped>
.wkTable {


  .top,
  .row {
    display: flex;
    align-items: center;
  }

  .top {
    display: flex;
    align-items: center;
    background: #F5F7FA;
    color: #888;
    line-height: 45px;
    font-size: 14px;
    display: flex;

  }



  .name {
    width: 30%;
    padding-left: 18px;
    text-align: left;
  }

  .status {
    width: 12%;
  }

  .author {
    width: 10%;
  }

  .posttime,
  .deadline {
    width: 14%;
  }

  .done-all {
    width: 12%;
  }

  .count {
    width: 10%;
    font-size: 13px;

    b {
      font-size: 18px;
    }
  }

  .operate {
    width: 16%;
    text-align: left;
  }



  .row {
    line-height: 55px;
    font-size: 16px;
    color: #555;


    .name {
      font-size: 16px;
      color: #555555;
    }

    .status {
      color: #FF5733;
    }

    .status.not-started {
      color: #FF5733;
    }

    .status.in-progress {
      color: #4395FF;
    }

    .status.has-ended {
      color: #86DFB2;
    }

    .posttime,
    .deadline {
      color: #888;
      font-size: 14px;
    }

    .done-all {
      font-size: 14px;
      color: #999;

      span {
        font-size: 30px;
        color: #555555;
      }
    }

    .operate {
      font-size: 14px;
      color: #888;

      ul {
        width: 100%;
        display: flex;
        justify-content: space-between;

        li {

          height: 30px;
          color: #888;
          cursor: pointer;
          text-align: center;
          line-height: 30px;
          border-radius: 15px;
          transition: .3s;
        }

        li.review-btn {
          color: #4395FF;
        }


        li.revise-btn:hover {
          color: #4395FF;
        }

        li.del-btn:hover {
          color: #FF5733;
        }
      }
    }


  }

  .row:hover {
    background: #E7F1FF;

    .operate {
      display: block;
    }
  }


}

::v-deep .el-button {
  background-color: transparent;
  /* 设置默认背景透明 */
  border: none;
  /* 移除边框，如果有需要的话 */
  width: auto !important;
  /* 阻止宽度变化，使用 !important 确保优先级 */
}

::v-deep .el-button:hover {
  background-color: transparent !important;
  /* 鼠标悬停时背景依然透明 */
  border-color: transparent !important;
  /* 如果有边框，确保悬停时边框也为透明 */
}
</style>